<template>
	<view class="demo">
        <text v-if="arr2var(formData,'tag1_text')!=''">多选：{{arr2var(formData,'tag1_text')}}</text>
        <text v-if="arr2var(formData,'tag2_text')!=''">单选：{{arr2var(formData,'tag2_text')}}</text>

		<button class="button" type="default" @tap="tag1=true">多选</button>
		<button class="button" type="default" @tap="tag2=true">单选</button>

		<zhilin-picker
            v-model="tag1"
            :default="formData.tag1"
            :showSearch='true'
            :data="options"
            title="请选择"
            :multiple="true"
            @change="popupConfirm(arguments)"
        />

        <zhilin-picker
            v-model="tag2"
            :default="formData.tag2"
            :showSearch='true'
            :data="options"
            title="请选择"
            :multiple="false"
            @change="popupConfirm2(arguments)"
        />

	</view>
</template>
<script>
// 弹层勾选选择器
import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
export default {
	components: {
		zhilinPicker
	},
	data () {
		return {
		    //控制tag1弹窗的形状状态，必须绑定到v-model
            tag1: false,
            //控制tag2弹窗，必须绑定到v-model
            tag2: false,
            //选项列表
			options: [
				{value:1, label:'标签一'},
				{value:2, label:'标签二'},
				{value:3, label:'标签三'},
				{value:4, label:'标签亖'}
			],
            //表单值
            formData:[]
		}
	},
    /**
     * 页面onLoad加载事件
     */
    onLoad() {
	    /*** 表单初始值 S ***/
        this.formData = {
            //tag1字段的value值
            tag1: [1,2],
            //tag1字段的text文字
            tag1_text: '标题一,标题二',
            //tag1字段的value值
            tag2: [3],
            //tag1字段的text文字
            tag2_text: '标题三'
        };

	    /*** 表单初始值 E ***/
	    //强制更新
	    //this.$forceUpdate();
    },
	methods: {
        /**
         * 当popup弹窗点击确定按钮时
         */
        popupConfirm (e) {
            //console.log(e);
			//第1个参数：更新选中的表单value值
            this.formData.tag1 = e[0]
		    //第2个参数：更新选中的选项的文本显示
			this.formData.tag1_text = e[1];
        },
        /**
         * 当popup弹窗点击确定按钮时
         */
        popupConfirm2 (e) {
            //console.log(e);
			//第1个参数：更新选中的表单value值
            this.formData.tag2 = e[0]
		    //第2个参数：更新选中的选项的文本显示
			this.formData.tag2_text = e[1];
        },
	}
}
</script>
<style>
.demo {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.button{
    margin:20rpx;
}
</style>